<html>
    <head>
        <title>插槽内容</title>
    </head>
    <body>
        <script>
            // 插槽内容
                    /*
                        Vue实现了一套内容分发的API，这套API的设计灵感源自 "Web Components 规范草案"，
                          它将<slot>元素作为承载分发内容的出口。
                    */

                    // 它允许你像这样的合成组件：
                            /*
                                <navigation-link url="/profile">
                                    Your Profile
                                </navigation-link>
                            */

                    // 然后你在 <navigation-link>的模板中可能会写为:
                            /*
                                <a v-bind:href="url" class="nav-link">
                                    <solot></slot>
                                </>
                            */

                    /*
                       当组件渲染的时候，<slot></slot> 将会被替换为"Your Profile"。

                       插槽内可以包含任何模板代码，包括HTML：
                    */
                            /*
                                <navigation-link url="/profile">
                                    --添加一个 Font Awesome 图标--
                                    <span class="fa fa-user"></span>
                                    Your Profile
                                </navigation-link>
                            */ 

                    // 甚至其他的组件：
                            /*
                                <navigation-link url="/profile">
                                    --添加一个图标的组件--
                                    <font-awesome-icon name="user"></font-awesome-icon>
                                    Your Profile
                                </navigation-link>
                            */
                    

                    /*
                        如果 <navigation-link> 的 template 中没有包含一个 <slot>元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。SSSSSSSSSS
                    */
        </script>
    </body>
</html>